<template>
	<view>
		<dsl-navbar title="消息" bgTopImg="white" isunfold></dsl-navbar>
		<view class="flex justify-between padding">
			<view v-for="(item,index) in classifyList" :key="index" @click="classifyMen(item)">
				<image :src="item.url" mode="" class="classify_icon"></image>
				<view class="classify_title">{{item.title}}</view>
			</view>
		</view>
		<view class="align-center padding solid-bottom" v-for="(item,inedx) in 1" 
		@click="messageMen()">
			<image src="/static/message/imgxiaoxi-3.png" mode="" class="message_icon"></image>
			<view class="margin-left">
				<view class="justify-between flex">
					<view class="message_title one_overflow">动态消息</view>
					<view class="text-sm text-gray">12小时前</view>
				</view>
				<view class="message_content one_overflow">恭喜您！您有一份价值588元的订单已经下单...</view>
			</view>
		</view>
		<view class="align-center padding solid-bottom" v-for="(item,inedx) in 1" 
		@click="$tools.push('/pages/chat/chat')">
			<image src="https://img2.baidu.com/it/u=1625226719,4039888906&fm=26&fmt=auto" mode="aspectFill" class="message_icon"></image>
			<view class="margin-left">
				<view class="justify-between flex">
					<view class="message_title one_overflow">企业名</view>
					<view class="text-sm text-gray">12小时前</view>
				</view>
				<view class="message_content one_overflow">恭喜您！您有一份价值588元的订单已经下单...</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classifyList: [{
						title: '动态通知',
						id: '',
						url: '/static/message/imgtongzhi.png',
						toUrl:'/pages/message/messageInform'
					},
					{
						title: '好友列表',
						id: '',
						url: '/static/message/imgliebiao.png',
						toUrl:'/pages/message/friendList'
					},
					{
						title: '聊过的人',
						id: '',
						url: '/static/message/imgliaoguo.png',
						toUrl:'/pages/message/familiarList'
					}
				]
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {},
		methods: {
			//消息分类
			classifyMen(item){
				uni.navigateTo({
					url:item.toUrl
				})
			},
			//动态消息
			messageMen(){
				uni.navigateTo({
					url:'/pages/message/activeMessage'
				})
			}
		},
		computed: {},
		components: {}
	}
</script>

<style>
	.classify_icon {
		width: 108rpx;
		height: 108rpx;
	}

	.classify_title {
		font-family: PingFang SC;
		font-weight: bold;
		color: #171D34;
		opacity: 1;
	}

	.message_icon {
		width: 88rpx;
		height: 88rpx;
		background: #FF8F2E;
		border-radius: 50%;
		opacity: 1;
	}

	.message_title {
		width: 450rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.message_content {
		width: 494rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #B7BED8;
		opacity: 1;
		margin-top: 20rpx;
	}

	view {
		/* border: 1rpx solid red; */
	}
</style>
